<template>
	<div class="myTeamList">
		<div class="memberTitle flex" style="justify-content: space-between;">
			<div>好友申请</div>
			<!-- <div class="flex">
				<el-input v-model="queryData.searchData" placeholder="请输入内容"></el-input>
				<el-button style="margin-left: 10px;" icon="el-icon-search">搜索</el-button>
			</div> -->
		</div>
		<div class="menberContent">
			<!-- <div class="menberConTitle flex" style="justify-content: space-between;">
				<div>
					<el-button round size="mini" :disabled="tableData.length>0?false:true" @click="toTop">置顶</el-button>
					<el-button round size="mini" :disabled="tableData.length>0?false:true" @click="exitTeam">删除好友</el-button>
				</div>
				<el-button round size="mini" @click="settingZ">新增好友</el-button>
			</div> -->
			<el-table ref="multipleTable" :data="pageData.items" style="width: 100%">
				<!-- <el-table-column type="selection" width="55"> </el-table-column> -->
				<el-table-column prop="friendName" label="姓名"></el-table-column>
				<el-table-column prop="jobNumber" label="工号"></el-table-column>
				<el-table-column prop="checkState" label="认证情况">
					<template slot-scope="scope">
						{{ scope.row.checkState=='SUCCESS'?'已认证':'未认证' }}
					</template>
				</el-table-column>
				<el-table-column prop="mainTeamName" label="主团队">
					<template slot-scope="scope">
						{{ scope.row.mainTeamName?scope.row.mainTeamName:'暂无主团队' }}
					</template>
				</el-table-column>
				<el-table-column prop="departmentName" label="现加入部门">
					<template slot-scope="scope">
						{{ scope.row.departmentName?scope.row.departmentName:'暂无部门' }}
					</template>
				</el-table-column>
				<el-table-column prop="dutiesName" label="职务">
					<template slot-scope="scope">
						{{ scope.row.dutiesName?scope.row.dutiesName:'暂无职务' }}
					</template>
				</el-table-column>
				<el-table-column prop="rankName" label="职级">
					<template slot-scope="scope">
						{{ scope.row.rankName?scope.row.rankName: scope.row.customizeRankName?scope.row.customizeRankName:'暂无职级' }}
					</template>
				</el-table-column>
				<el-table-column prop="dutyName" label="岗位">
					<template slot-scope="scope">
						{{ scope.row.dutyName?scope.row.dutyName:'暂无岗位' }}
					</template>
				</el-table-column>
				<el-table-column label="操作">
					<template slot-scope="scope">
						<!-- <el-button type="text" @click="handLook(scope.row)">查看</el-button> -->
						<div v-if="scope.row.state == 0">
							<el-button type="text" @click="agreeFriends(scope.row)">同意</el-button>
							<el-button type="text" @click="rejectFriend(scope.row)">拒绝</el-button>
						</div>
						<div v-else>
							{{ scope.row.state==1?'已同意':scope.row.state==2?'已拒绝':'' }}
						</div>
						<!-- <el-button type="text">删除</el-button> -->
					</template>
				</el-table-column>
			</el-table>
			<pagina-tion :totalNum="pageData.totalNum" @paginaClick="paginaClick"></pagina-tion>
		</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				userId: '',
				tableData: [],
				queryData: {
					userId: this.$store.state.user.userInfo.id,
					page: 1,
					pageSize: $globalData.pageSize
				},
				// 认证状态数据
				attestationState: $globalData.attestationState,
				pageData: ''
			}
		},
		mounted() {
			this.userId = this.$store.state.user.userInfo.id
			this.$store.commit('set_linkIndex', 12)
			this.getCompanyList()
		},
		methods: {
			paginaClick(val) {
				this.queryData.page = val
				this.getCompanyList()
			},
			getCompanyList() {
				// 获取用户联系人申请列表
				this.$request.postForm(this.$api.applyForMyContact, this.queryData).then(res => {
					if (res.code == 200) {
						this.pageData = res.data
						// console.log(res.data)
					}
				})
			},
			agreeFriends(row){
				// 同意好友申请
				this.$request.postForm(this.$api.agreeFriends, {
					friendId: row.applyUserId,
					userId: this.userId
				}).then(res=>{
					if (res.code == 200) {
						this.$message.success('操作成功')
						this.getCompanyList()
					}
				})
			},
			rejectFriend(row) {
				// 拒绝好友申请
				this.$confirm('是否拒绝该好友申请?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					this.$request.postForm(this.$api.rejectFriend, {
						friendId: row.applyUserId,
						userId: this.userId
					}).then(res => {
						if (res.code == 200) {
							this.$message.success('操作成功')
							this.getCompanyList()
						}
					})
				})

			},
			// handLook(row) {
			// 	// 查看联系人
			// 	let url = `/myteam/teaminfo/menberaudit/${row.id}?t=${new Date().getTime()}`
			// 	this.$router.push(url)
			// },
			// settingZ() {
			// 	// 新增联系人

			// },
			// exitTeam() {
			// 	// 删除联系人
			// 	if (!this.tableSelectionChange) {
			// 		this.$message.error('请选择要删除的联系人')
			// 		return
			// 	}
			// 	this.$confirm('确定要删除选中联系人吗？', '提示', {
			// 		confirmButtonText: '确定',
			// 		cancelButtonText: '取消',
			// 		type: 'warning'
			// 	}).then(() => {

			// 	})
			// },
			// handleSelectionChange(e) {
			// 	// 表格选择事件
			// 	this.tableSelectionChange = e
			// 	// ref = multipleTable
			// },
			// filterTag(value, row) {
			// 	//表格筛选
			// 	return row.checkState === value;
			// },
		}
	}
</script>

<style scoped="scoped">
	.memberTitle {
		color: #333333;
		font-size: 20px;
		padding: 20px;
	}

	.menberContent {
		padding: 0 20px;
		padding-bottom: 20px;
	}

	.menberConTitle {
		width: 100%;
		background: #F3F3F3;
		text-align: left;
		padding: 5px 20px;
		margin-bottom: 20px;
	}

	.ztd {
		color: red;
	}
</style>
